import { Modal } from "antd"
import { ReactNode } from "react"
import styled from "styled-components"

import { useSlot } from "../slot"

const ModalForm = styled((props: any) => {
	const { children, moreProps } = props
	const { footer, others } = useSlot(children)
	return (
		<Modal footer={[...footer] as ReactNode[]} {...moreProps}>
			{others}
			{/* {Object.keys(otherChildren).map(key => otherChildren[key])} */}
		</Modal>
	)
})`
	padding: 2rem;
`

export default ModalForm
